import React, { Component } from 'react'
import { Input, Button, Pagination } from 'antd'
import './index.css'
import { SearchOutlined } from '@ant-design/icons'
import CourseCard from '../../../ComponentsCard/CourseCard'
import { getCookie, setCookie } from '../../../Utils/Cookie_'
export default class CourseManagement extends Component {
  state = {
    typeList: [],
    chooseTopic: 0,
    chooseType: 0,
    searchKeyword: '',
    allList: [],
    searchList: [],
    page: 1,
    pagesize: 8,
  }
  changeType = (id) => {
    this.setState({
      chooseType: id,
      chooseTopic: 0,
    })
  }
  changeTopic = (id) => {
    this.setState({
      chooseTopic: id,
    })
  }
  componentDidMount = () => {
    const campusId = getCookie('campusId')
    console.log(campusId)
    const result = [
      {
        courseId: 0,
        courseImg:
          'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        courseName: '蜡笔小新',
        courseMinPrice: 2000,
        courseMaxPrice: 2500,
        classHour: 20,
      },
      {
        courseId: 1,
        courseImg:
          'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        courseName: '蜡笔小新',
        courseMinPrice: 2000,
        courseMaxPrice: 2500,
        classHour: 20,
      },
      {
        courseId: 2,
        courseImg:
          'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        courseName: '蜡笔小新',
        courseMinPrice: 2000,
        courseMaxPrice: 2500,
        classHour: 20,
      },
      {
        courseId: 3,
        courseImg:
          'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        courseName: '蜡笔小新',
        courseMinPrice: 2000,
        courseMaxPrice: 2500,
        classHour: 20,
      },
      {
        courseId: 4,
        courseImg:
          'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        courseName: '蜡笔小新',
        courseMinPrice: 2000,
        courseMaxPrice: 2500,
        classHour: 20,
      },
      {
        courseId: 5,
        courseImg:
          'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        courseName: '蜡笔小新',
        courseMinPrice: 2000,
        courseMaxPrice: 2500,
        classHour: 20,
      },
      {
        courseId: 6,
        courseImg:
          'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        courseName: '蜡笔小新',
        courseMinPrice: 2000,
        courseMaxPrice: 2500,
        classHour: 20,
      },
      {
        courseId: 7,
        courseImg:
          'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        courseName: '蜡笔小新',
        courseMinPrice: 2000,
        courseMaxPrice: 2500,
        classHour: 20,
      },
      {
        courseId: 8,
        courseImg:
          'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        courseName: '蜡笔小新',
        courseMinPrice: 2000,
        courseMaxPrice: 2500,
        classHour: 20,
      },
    ]
    this.setState({
      typeList: [
        {
          name: '常规课',
          typeId: 0,
          topicList: [
            {
              name: '常规课',
              topicId: 0,
            },
            {
              name: '常规课',
              topicId: 1,
            },
            {
              name: '常规课',
              topicId: 2,
            },
            {
              name: '常规课',
              topicId: 3,
            },
            {
              name: '常规课',
              topicId: 4,
            },
            {
              name: '常规课',
              topicId: 5,
            },
          ],
        },
        {
          name: '常规课',
          typeId: 1,
          topicList: [
            {
              name: '常规课',
              topicId: 0,
            },
            {
              name: '常规课',
              topicId: 1,
            },
            {
              name: '常规课',
              topicId: 2,
            },
            {
              name: '常规课',
              topicId: 3,
            },
            {
              name: '常规课',
              topicId: 4,
            },
            {
              name: '常规课',
              topicId: 5,
            },
          ],
        },
        {
          name: '常规课',
          typeId: 2,
          topicList: [
            {
              name: '常规课',
              topicId: 0,
            },
            {
              name: '常规课',
              topicId: 1,
            },
            {
              name: '常规课',
              topicId: 2,
            },
            {
              name: '常规课',
              topicId: 3,
            },
            {
              name: '常规课',
              topicId: 4,
            },
            {
              name: '常规课',
              topicId: 5,
            },
          ],
        },
        {
          name: '常规课',
          typeId: 3,
          topicList: [
            {
              name: '常规课',
              topicId: 0,
            },
            {
              name: '常规课',
              topicId: 1,
            },
            {
              name: '常规课',
              topicId: 2,
            },
            {
              name: '常规课',
              topicId: 3,
            },
            {
              name: '常规课',
              topicId: 4,
            },
            {
              name: '常规课',
              topicId: 5,
            },
          ],
        },
        {
          name: '常规课',
          typeId: 4,
          topicList: [
            {
              name: '常规课',
              topicId: 0,
            },
            {
              name: '常规课',
              topicId: 1,
            },
            {
              name: '常规课',
              topicId: 2,
            },
            {
              name: '常规课',
              topicId: 3,
            },
            {
              name: '常规课',
              topicId: 4,
            },
            {
              name: '55',
              topicId: 5,
            },
          ],
        },
        {
          name: '常规课',
          typeId: 5,
          topicList: [
            {
              name: '常规课',
              topicId: 0,
            },
            {
              name: '常规课',
              topicId: 1,
            },
            {
              name: '常规课',
              topicId: 2,
            },
            {
              name: '常规课',
              topicId: 3,
            },
            {
              name: '常规课',
              topicId: 4,
            },
            {
              name: '常规课',
              topicId: 5,
            },
          ],
        },
      ],
      chooseTopic: 0,
      chooseType: 0,
      searchKeyword: '',
      allList: result,
      searchList: result,
    })
  }
  changePage = (page) => {
    this.setState({
      page: page,
    })
  }
  chooseCourse = (id) => {
    setCookie({ courseId: id })
  }
  render() {
    const { typeList, chooseTopic, chooseType, page, pagesize, searchList } =
      this.state
    return (
      <div className="coures-manage-box">
        <div className="coures-manage-header">
          <div className="header-title">广东校区</div>
          <div className="header-search">
            <Input
              placeholder="搜索内容"
              prefix={<SearchOutlined style={{ color: '#c4c8cf' }} />}
            />
            <Button style={{ marginLeft: '25px' }} type="primary">
              立即搜索
            </Button>
          </div>
        </div>
        <div className="coures-manage-title">
          <div className="coures-type-list">
            <div className="list-title">课程类型</div>
            <div className="list-box">
              {typeList.map((item) => {
                return (
                  <div
                    key={item.typeId}
                    className={
                      'type-item ' + (chooseType == item.typeId ? 'active' : '')
                    }
                    onClick={() => this.changeType(item.typeId)}
                  >
                    {item.name}
                  </div>
                )
              })}
            </div>
          </div>
          <div className="coures-topic-list">
            <div className="list-title">课程栏目</div>
            {typeList[chooseType] &&
            typeList[chooseType].topicList &&
            typeList[chooseType].topicList.length ? (
              <div className="list-box">
                {typeList[chooseType].topicList.map((item) => {
                  return (
                    <div
                      key={item.topicId}
                      className={
                        'topic-item ' +
                        (chooseTopic == item.topicId ? 'active' : '')
                      }
                      onClick={() => this.changeTopic(item.topicId)}
                    >
                      {item.name}
                    </div>
                  )
                })}
              </div>
            ) : (
              ''
            )}
          </div>
        </div>
        <div className="coures-manage-list">
          {searchList && searchList.length
            ? searchList
                .slice((page - 1) * pagesize, page * pagesize)
                .map((item) => {
                  return (
                    <div
                      style={{
                        width: '25%',
                      }}
                      key={item.courseId}
                    >
                      <CourseCard
                        toObj={`/homePage/teachingResearchManagement/campusManagement/CourseManagement/CourseDescription`}
                        beforeClick={() => this.chooseCourse(item.courseId)}
                        courseInfo={item}
                      />
                    </div>
                  )
                })
            : ''}
        </div>
        <div className="show-total">
          <div className="total">共{searchList.length}条</div>
          <Pagination
            onChange={this.changePage}
            defaultCurrent={page}
            pageSize={pagesize}
            total={searchList.length}
          />
        </div>
      </div>
    )
  }
}
